<template>
	<view class="technician-pages-count" :style="{background:pageColor}">


		<block v-if="!configInfo.plugAuth.coachport">
			<abnor type="NOT_AUTH" :isCenter="true"></abnor>
		</block>
		<block v-if="configInfo.plugAuth.coachport">
			<!-- #ifndef H5 -->
			<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="统计" color="#000"
				:backgroundColor="pageScrollTop>1?'#c7e7bd':''">
			</uni-nav-bar>
			<!-- #endif -->

			<view class="discount-info rel">
				<image class="abs discount-bg" :src="`https://www.peikangbao.cn/admin/anmo/coachport/count-bg.png`">
				</image>
				<image class="abs bg-img" :src="`https://www.peikangbao.cn/admin/anmo/coachport/count-level.png`">
				</image>
				<image class="abs bg-icon" :src="`https://www.peikangbao.cn/admin/anmo/coachport/count-icon.png`">
				</image>
				<view class="abs count-info flex-center f-desc c-caption">
					<view class="flex-center flex-column" style="width:200rpx">
						<view class="text-bold" style="font-size:36rpx;margin:4rpx 0 12rpx 0;"
							:style="{color:primaryColor}">
							{{coach_info.coach_level || '-'}}
						</view>
						<view class="mt-sm">当前等级</view>
					</view>
					<view class="flex-1 flex-x-between" style="padding:0 40rpx 0 20rpx">
						<view class="flex-y-center">
							<view class="text">评分</view>
							<view class="c-title f-sm-title font-num ml-sm">{{coach_info.star|| 0}}</view>
						</view>
						<view class="flex-y-center">
							<view class="text">被喜欢</view>
							<view class="c-title f-sm-title font-num ml-sm">
								{{(coach_info.collect_num*1 - coach_info.virtual_collect*1) || 0}}
							</view>
						</view>
						<view class="flex-y-center">
							<view class="text">被浏览</view>
							<view class="c-title f-sm-title font-num ml-sm">{{coach_info.pv || 0}}</view>
						</view>
					</view>
				</view>
			</view>

			<view style="padding:0 28rpx">
				<view class="fill-base radius-16 mt-sm rel" style="padding:28rpx">
					<image class="abs count-bg" :src="`https://www.peikangbao.cn/admin/anmo/coachport/shouyi.png`">
					</image>
					<view @tap="$refs.show_shouyi_rule_item.open()" class="flex-y-center f-title c-title text-bold rel">
						本期收益<i class="iconfont iconzhu text-normal"></i></view>
					<view class="count-list flex-warp f-desc c-caption">
						<view class="count-item">
							<view class="flex-y-end f-md-title price font-num">
								<view class="flex-y-baseline f-sm-title">
									¥<view class="num">
										{{coach_data.coach_cash||0}}
									</view>
								</view>
							</view>
							<view>项目分成</view>
						</view>
						<view class="count-item">
							<view class="flex-y-end f-md-title price font-num">
								<view class="flex-y-baseline f-sm-title">
									¥<view class="num">
										{{coach_data.car_cash||0}}
									</view>
								</view>
							</view>
							<view>车费</view>
						</view>
					</view>
					<view class="count-list flex-warp f-desc c-caption mt-lg pt-md b-1px-t">
						<view class="count-item flex-y-baseline">储值返佣
							<view class="flex-y-baseline f-caption c-title font-num ml-sm">¥<view class="f-md-title">
									{{coach_data.balance_cash || 0}}
								</view>
							</view>
						</view>
						<view class="count-item flex-y-baseline">扣费明细
							<view class="flex-y-baseline f-caption c-title font-num ml-sm">¥<view class="f-md-title">
									{{coach_data.charging_cash || 0}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fill-base radius-16 mt-md rel" style="padding:28rpx 0 28rpx 28rpx">
					<image class="abs count-bg" :src="`https://www.peikangbao.cn/admin/anmo/coachport/kaohe.png`">
					</image>
					<view @tap="$refs.show_kaohe_rule_item.open()" class="flex-y-center f-title c-title text-bold rel">
						本期考核数据<i class="iconfont iconzhu text-normal"></i></view>
					<view class="count-list kaohe flex-warp f-desc c-caption">
						<view class="count-item">
							<view class="flex-y-end f-md-title price font-num">
								<view class="flex-y-baseline f-sm-title" :style="{color:primaryColor}">
									¥<view class="num">
										{{check_data.coach_price||0}}
									</view>
								</view>
							</view>
							<view>业绩</view>
						</view>
						<view class="count-item">
							<view class="flex-y-end f-md-title c-title font-num">{{check_data.coach_add_balance||0}}%
							</view>
							<view>加时率</view>
						</view>
						<view class="count-item">
							<view class="flex-y-end f-md-title c-title font-num">
								{{check_data.coach_integral||0}}
							</view>
							<view>积分</view>
						</view>
						<view class="count-item">
							<view class="flex-y-end f-md-title c-title">
								<block v-if="check_data.coach_time_long.hour">
									<view class="font-num">{{check_data.coach_time_long.hour}}</view>
									<view class="f-desc text-bold">时</view>
								</block>
								<block v-if="!check_data.coach_time_long.hour || check_data.coach_time_long.minute">
									<view class="font-num">{{check_data.coach_time_long.minute}}</view>
									<view class="f-desc text-bold">分</view>
								</block>
							</view>
							<view>服务时长</view>
						</view>
						<view class="count-item">
							<view class="flex-y-end f-md-title c-title">
								<block v-if="check_data.online_time.hour">
									<view class="font-num">{{check_data.online_time.hour}}</view>
									<view class="f-desc text-bold">时</view>
								</block>
								<block v-if="!check_data.online_time.hour || check_data.online_time.minute">
									<view class="font-num">{{check_data.online_time.minute}}</view>
									<view class="f-desc text-bold">分</view>
								</block>
							</view>
							<view>在线时长</view>
						</view>
					</view>
				</view>
				<view class="fill-base radius-16 mt-md" style="padding:28rpx 0">
					<view class="f-title c-title text-bold" style="padding:0 28rpx">资金明细</view>
					<view class="record-list flex-warp pt-lg">
						<view @tap.stop="$util.goUrl({url:item.url})" class="record-item flex-center flex-column"
							v-for="(item,index) in recordList" :key="index"
							v-show="!configInfo.hide_order_info || (configInfo.hide_order_info && item.text != '车费明细')">
							<image class="record-img"
								:src="`https://www.peikangbao.cn/admin/anmo/coachport/${item.icon}.png`"></image>
							<view class="f-paragraph c-title">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="space-footer"></view>

			<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
			<longbingbing-tabbar tabType="coachTabBar" :cur="3"></longbingbing-tabbar>
		</block>


		<uni-popup ref="show_shouyi_rule_item" type="center" :maskClick="false" :zIndex="999">
			<view class="common-popup-content fill-base pd-lg radius-34" v-if="coach_info&&coach_info.level_cycle">
				<view class="title">本期收益</view>
				<view class="f-desc c-title mt-lg">
					系统设置周期为{{cycleList[coach_info.level_cycle].title}}{{cycleList[coach_info.level_cycle].text}}
					<view class="mt-sm flex-1"><span
							class="text-bold">储值返佣</span>：{{$t('action.attendantName')}}邀请用户充值{{configInfo.plugAuth.balancediscount?`、购买储值折扣卡`:``}}{{configInfo.plugAuth.balancediscount?`、购买会员卡`:``}}获得的佣金
					</view>
					<view class="mt-sm flex-1"><span class="text-bold">扣费明细</span>：{{record_text}}</view>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_shouyi_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="show_kaohe_rule_item" type="center" :maskClick="false" :zIndex="999">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">本期考核数据</view>
				<view class="f-desc c-title mt-lg">
					<!-- 一个周期时长为7天，周一至周日 -->
					在折算周期（T）内，{{$t('action.attendantName')}}完成以下维度的考核指标后，{{$t('action.attendantName')}}可以在T+1个周期按照该等级算提成比例。例如折算周期为每月，{{$t('action.attendantName')}}在这个月内完成了多少，会在月底30号系统核算，满足某个等级标准之后，会在下一个月的1号生效
					<view class="mt-sm flex-1">
						<span class="text-bold">最低业绩</span>：{{$t('action.attendantName')}}服务的所有服务订单和加时订单，不包含车费。
					</view>
					<view class="mt-sm flex-1">
						<span class="text-bold">加时率</span>：加时订单金额/最低业绩
					</view>
					<view class="mt-sm flex-1">
						<span
							class="text-bold">积分</span>：若储值返佣设置勾选了返积分，则{{$t('action.attendantName')}}邀请用户充值{{configInfo.plugAuth.balancediscount?`、购买储值折扣卡`:``}}将获得积分，积分和金额按照1:1比例换算
					</view>
					<view class="mt-sm flex-1">
						<span class="text-bold">服务时长</span>：{{$t('action.attendantName')}}接单服务的时间
					</view>
					<view class="mt-sm flex-1">
						<span class="text-bold">在线时长</span>：{{$t('action.attendantName')}}在线工作的时间
					</view>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_kaohe_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				pageScrollTop: 0,
				cycleList: [{
					id: 0,
					title: '不限',
					text: ''
				}, {
					id: 1,
					title: '每周',
					text: '，每周周一到周日为周期来循环'
				}, {
					id: 5,
					title: '每半月',
					text: '，每月1号到15号、16号到月末最后一天为周期来循环'
				}, {
					id: 2,
					title: '每月',
					text: '，每月1号到月末的最后一天来循环'
				}, {
					id: 3,
					title: '每季度',
					text: '，1、2、3月为一个季度，4、5、6月为一个季度，7、8、9月为一个季度，10、11、12月为一个季度'
				}, {
					id: 4,
					title: '每年',
					text: '，从1月1日到12月最后一天为一个折算周期'
				}],
				recordList: [{
					text: '分成明细',
					icon: 'comm-record',
					url: '/technician/pages/income/commission-list',
				}, {
					text: '车费明细',
					icon: 'carfee-record',
					url: '/technician/pages/car-fare'
				}, {
					text: '返佣明细',
					icon: 'cash-integral',
					url: '/technician/pages/income/cash-integral'
				}, {
					text: '余额变动',
					icon: 'balance-record',
					url: '/technician/pages/income/update-record?type=1'
				}],
				record_text: ``,
				coach_info: {},
				coach_data: {},
				check_data: {
					coach_time_long: {
						hour: 0,
						minute: 0
					},
					online_time: {
						hour: 0,
						minute: 0
					}
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			mineInfo: state => state.user.mineInfo,
			haveOperItem: state => state.order.haveOperItem,
		}),
		async onLoad(options) {
			this.options = options
			this.$util.setNavigationBarColor({
				bg: '#ffffff',
				color: '#000000'
			})
			await this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			await this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			let {
				scrollTop
			} = e
			this.pageScrollTop = scrollTop
		},
		methods: {
			...mapActions(['getConfigInfo', ]),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh || !this.userInfo.id) {
					await this.getConfigInfo()
				}

				let {
					coachbroker = false,
						channel = false,
						salesman = false,
						reseller = false,
				} = this.configInfo.plugAuth

				let role = ``
				if (coachbroker) {
					role += this.$t('action.brokerName')
				}
				if (channel) {
					role += `${role && role.slice(-1) != `、` ? `、` : ``}` + this.$t('action.channelName')
				}
				if (salesman) {
					role += `${role && role.slice(-1) != `、` ? `、` : ``}业务员`
				}
				if (reseller) {
					role += `${role && role.slice(-1) != `、` ? `、` : ``}${this.$t('action.resellerName')}`
				}
				let record_text = `${this.$t('action.attendantName')}承担的`
				if (role.length > 0) {
					record_text += `各个推广角色（${role}）的佣金扣费，以及`
				}
				record_text += `广告费、储值扣费和手续费`
				this.record_text = record_text

				let data = await this.$api.technician.coachDataCount()
				let {
					stage_commission = 0
				} = data
				let {
					title = ''
				} = data.coach_level
				data.coach_level = stage_commission ? `特殊等级` : title
				this.coach_info = this.$util.pick(data, ['level_cycle', 'coach_level', 'star', 'collect_num',
					'virtual_collect', 'pv'
				])

				let {
					coach_data,
					check_data
				} = data
				this.coach_data = coach_data
				this.check_data = check_data
				this.$util.hideAll()

				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				await this.$util.checkAuth({
					type: 'userLocationBackground',
					tip: '需要获取您当前的位置信息，请在位置信息中选择'
				})
				// #endif

				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}

				let {
					status: coach_status = 0,
					coach_position = 0
				} = this.userCoachStatus
				if (coach_position && coach_status == 2) {
					this.$util.getCoachUtilLoca()
				}
				// #endif
			},
			async initRefresh() {
				await this.initIndex(true)
			},
		}
	}
</script>

<style lang="scss">
	.technician-pages-count {

		.discount-info {
			overflow: hidden;
			/* #ifdef H5 */
			height: 317rpx;
			/* #endif */
			/* #ifndef H5 */
			height: 417rpx;
			/* #endif */

			.discount-bg {
				width: 100%;
				/* #ifdef H5 */
				height: 320rpx;
				/* #endif */
				/* #ifndef H5 */
				height: 360rpx;
				/* #endif */
				top: 0;
				left: 0;
			}

			.bg-img {
				width: 694rpx;
				height: 174rpx;
				left: 50%;
				bottom: 10rpx;
				margin-left: -347rpx;
				z-index: 2;
			}

			.bg-icon {
				width: 180rpx;
				height: 120rpx;
				bottom: 120rpx;
				right: 10rpx;
				z-index: 1;
			}

			.count-info {
				z-index: 2;
				width: 100%;
				height: 174rpx;
				padding: 0 28rpx;
				bottom: 0;

				.flex-x-between {
					.flex-y-center {
						margin-top: 10rpx;

						.text {
							height: 38rpx;
							line-height: 46rpx;
						}
					}
				}
			}

		}

		.count-bg {
			top: 0;
			left: 0;
			width: 100%;
			height: 160rpx;
		}

		.count-list {
			.count-item {
				width: 50%;

				.price {
					color: #FF3333;
					margin-top: 16rpx;

					.num {
						font-size: 54rpx;
						margin-left: 5rpx
					}
				}
			}
		}

		.count-list.kaohe {
			.count-item {
				width: 45%;

				.f-md-title {
					height: 56rpx;
					line-height: 1;
					margin: 30rpx 0 10rpx 0;
				}
			}

			.count-item:nth-child(1) {
				.f-md-title {
					margin: 32rpx 0 10rpx 0;
				}
			}

			.count-item:nth-child(4),
			.count-item:nth-child(5) {
				.f-md-title {
					margin: 36rpx 0 10rpx 0;
				}
			}

			.count-item:nth-child(3n-1) {
				width: 35%;
			}

			.count-item:nth-child(3n) {
				width: 20%;
			}
		}

		.iconzhu {
			margin-left: 8rpx;
			color: #999;
		}

		.record-list {
			.record-item {
				width: 25%;

				.record-img {
					width: 84rpx;
					height: 84rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}
</style>